<template>
  <!--    功能表格-->
  <div class="product-card relase">
    <div class="relase_railse">
      <div class="relasr">
        交付清单
      </div>
      <div v-for="suite in suiteList" :key="suite.name" class="text_center">
        <div>{{ suite.name }}</div>
      </div>
    </div>
    <template v-for="group in tableData">
      <!--      服务类型循环-->
      <div :key="group.name">
        <div class="relase_permiss">
          {{ group.name }}
        </div>
        <div>
          <!--          功能组循环-->
          <div v-for="subGroup in group.children" :key="subGroup.name" class="function">
            <div class="function_span">
              <div class="function_ji">{{ subGroup.name }}</div>
              <div class="function_left">
                <div v-for="func in subGroup.children" :key="func.name" class="function_name">{{ func.name }}</div>
              </div>
            </div>
            <div v-for="suite in suiteList" :key="'func'+suite.name" class="function_spans">
              <div v-for="func in subGroup.children" :key="'func'+suite.name+func.name" class="function_sp">
                <div>
                  <img v-if="check(func, suite)" :src="gou" class="order_gou">
                  <img v-else :src="hen" class="order_gang">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </template>

  </div>
</template>

<script>
  const gou = ''
  const hen = ''
  export default {
    name: 'FuncionsTable',
    props: {
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      },
      /**
       * 需要传入suite控制列数
       */
      suiteList: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        gou,
        hen
      }
    },
    methods: {
      /**
       * 判断suite是否有该功能
       */
      check (func, suite) {
        const allowList = func.suiteList
        return allowList && allowList.indexOf(suite.code) > -1
      }
    }
  }
</script>

<style lang="less">
  .product-card {
    &.relase {
      width: 100%;
      min-width: 800px;
      border-left: 1px solid #f0f0f0;
      border-right: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
      margin-bottom: 24px;
      margin-top: 54px;
    }

    .relase_railse {
      display: flex;
      flex-direction: row;
      background-color: #fafafa;
      padding: 18px 28px;
    }

    .relase_railse > div {
      width: 24%;
      font-weight: 700;
      font-size: 16px;
    }

    .relasr {
      width: 30%;
    }

    .text_center {
      text-align: center;
      color: #353535;
    }

    .text_center > div {
      font-weight: 700;
    }

    .function {
      display: flex;
      flex-direction: row;
      padding: 0 28px;
      width: 100%;
      border-bottom: 1px solid #f0f0f0;
    }

    .function_span {
      display: flex;
      width: 24%;
    }

    .function_ji {
      width: 31%;
      height: 40px;
      line-height: 40px;
      text-align: left;
      color: #353535;
      margin: auto;
    }

    .function_left, .function_lefts, .function_spans {
      display: flex;
      flex-direction: column;
    }

    .function_left, .function_lefts {
      width: 65%;
    }

    .function_left {
      border-left: 1px solid #f0f0f0;
      padding-left: 16px;
    }

    .function_name, .function_sp {
      height: 40px;
      line-height: 40px;
    }

    .function_name {
      color: #353535;
      font-size: 14px;
    }

    .function_spans {
      width: 24%;
    }

    .function_left, .function_lefts, .function_spans {
      display: flex;
      flex-direction: column;
    }

    .function_sp, .function_sps {
      width: 100%;
      justify-content: space-around;
    }

    .function_sp {
      text-align: center;
    }

    .function_name, .function_sp {
      height: 40px;
      line-height: 40px;
    }

    .function_sp > div {
      text-align: center;
      height: 40px;
      line-height: 40px;
    }

    .order_gou, .order_logog {
      width: 16px;
      height: 14px;
    }
    .order_gang {
      width: 14px;
      height: 3px;
    }

    .relase_permiss {
      width: 100%;
      color: #353535;
      font-size: 16px;
      padding: 18px 28px;
      background-color: #fff1f0;
    }
  }

</style>
